<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div style="margin: 20px 0;">
      <el-form :inline="true" ref="form" :rules="rules" :model="formInline" style="text-align: right;">
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">项目管理</div>
      <!-- 表格 -->
      <div class="listfile" :style="{ overflow: 'auto', minHeight: tableHeight }">
        <div class="project_item" v-for="(item, index) in tableData" :key="index">
          <el-row>
            <el-col :span="14">
              <div class="info"> 项目名称：{{item.projectName}}</div>
              <div class="info"> 创建时间：{{item.createTime}}</div>
              <div class="info"> {{item.projectExplain.split(';')[0]}}</div>
              <div class="info"> {{item.projectExplain.split(';')[1]}}</div>
              <div class="info"> 备注：{{item.projectAddrInfo}}</div>
            </el-col>
            <el-col :span="10" style="text-align: right">
              <div class="photo">
                <div class="title"> 项目图片     </div>
                <img v-if="item.projectPicture" :src="item.projectPicture" alt="">
                <img v-else src="../../assets/imgs/prodefault.jpg" alt="">
              </div>
              <!-- <div class="photo">
                <div class="title"> 项目图片 </div>
                <img :src="item.projectPicture" alt="">
              </div> -->
              <div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <!-- <div class="table_page">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>
    </div> -->
    <projectModal ref="addCustomProject" @submit="submitAddChange" :historyData='addEdit_data'></projectModal>

  </div>
</template>

<script>
import { addProjectCustom } from '@/api/project'
import { loadCustomerProList } from '@/api/myProject'
import projectModal from "./projectModal"

  export default {
    components: {projectModal},
    data() {
      const validImei = (rule, value, callback)=> {
        console.log(rule,value)
          if(value && value.trim().length > 4) {
            callback()
          } else {
            callback(new Error('IMEI不能少于5位'))
          }
      }
      return {
        tableHeight: 'calc(100vh - 296px)',
        totalCount: 0, //总条数，总共有多少条数据
        currentPage: 1, // 当前页
        pageSize: 3, // 每页显示多少条
        addEdit_data: {},
        loading: true,
        tableData: [],
        formInline: {
          imei: ''
        },
        rules: {
          imei: [ {validator: validImei, trigger: 'blur'}]
        }
      }
    },
    methods: {
      add(){
        this.$refs.addCustomProject.searchProvince(); //查询
        this.$refs.addCustomProject.modal1 = true;
        this.$refs.addCustomProject.title_name = '添加项目';
      },
      // 新增--保存后，子传给父组件
      submitAddChange (data) {
          // 用户和用户的用户
        addProjectCustom(data).then(res => {
          if(res.statusCode == '200'){
            this.$message.success(`项目添加成功`)
            this.currentPage = 1
            this.loadData()
          }else {
            this.$message.error(`项目添加失败！`)
          }
        })
      },
      //用户查询
      search() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.currentPage = 1
            this.loadData()
          }
        })
      },
      // 分页
      handleCurrentChange(newPage) {
        this.currentPage = newPage
        this.loadData()
      },
      //每页
      handleSizeChange(val) {
        this.pageSize = val
        this.loadData()
      },
      loadData(){

        loadCustomerProList({
          userId: this.$store.state.user.id,
          userName: this.$store.state.user.account,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }).then(res => {
          this.tableData = res.data.content;
          this.totalCount = res.data.total;
        })

      }

    },
    created(){
      this.loadData()
    },
    mounted(){
      this.loading = false;

    },
    destroyed() {
      this.$destroy();
      this.historyData = [];
      this.page_Data = [];
    },
     watch: {
      formInline: {
        handler: function(val){
          if(val.imei) {

          } else {
            this.currentPage = 1
            this.loadData()
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped lang="scss">
.tb_title{
  z-index: 4000 !important;
  height: 50px;
}
.project_item {
  padding: 26px 20px;
  height: 210px;
  font-size: 16px;
  color: #fff;
  &:nth-child(2n-1) {
    background: #142E4F;
    // border: 1px solid #20BCFC;

  }
  .title {
    color: #1EB0FC;
    font-family: SourceHanSansCN-Medium;
    margin-bottom: 10px;
  }
  .info {
    height: 32px;
  }
  .photo {
    display: inline-block;
    height: 100%;
    text-align: center;
    margin-left: 20px;
  }
  img {
    width: 246px;
    height: 130px;
    border-radius: 3px;
  }
}

</style>
